<template>
  <v-form v-model="valid" ref="myOrderForm">
    <v-layout wrap>
      <v-flex>
        <v-text-field v-model="Order.id" hidden />
        <v-layout>
          <v-text-field v-if="isEdit" v-model="Order.lsh" label="流水号" disabled />
          <v-text-field v-if="isEdit" v-model="Order.statusInfo" label="状态" disabled />
        </v-layout>
        <v-layout v-if="!Order.status">
          <v-select
            item-text="driverName"
            item-value="driverCode"
            v-model="Order.driverCode"
            :items="drivers"
            label="司机"
            required
          />
          <v-select
            item-text="pathName"
            item-value="pathCode"
            v-model="Order.pathCode"
            :items="paths"
            label="录入路线"
            required
          />
          <v-text-field v-if="isEdit" v-model="Order.lrusername" label="录入人" required disabled />
        </v-layout>
        <v-layout>
          <v-text-field v-if="isEdit" disabled v-model="Order.lrsj" label="录入时间" required />
          <v-text-field v-if="isEdit" disabled v-model="Order.fcsj" label="发车时间" required />
          <v-text-field v-if="isEdit" disabled v-model="Order.sdsj" label="到达时间" required />
        </v-layout>

        <el-table
          class="elevation-1"
          :data="ghList"
          ref="multipleTable"
          border
          fit
          tooltip-effect="dark"
        >
          <el-table-column prop="lsh" label="流水号" width="180"></el-table-column>
          <el-table-column prop="hh" label="货号" width="180"></el-table-column>
          <el-table-column prop="pinm" label="品名"></el-table-column>
          <el-table-column prop="xingh" label="型号"></el-table-column>
          <el-table-column prop="sl" label="数量"></el-table-column>
          <el-table-column prop="lxInfo" label="类型"></el-table-column>
          <el-table-column prop="contact" label="联系人"></el-table-column>
          <el-table-column prop="phone" label="联系方式"></el-table-column>
          <el-table-column prop="location" label="地址"></el-table-column>
          <el-table-column prop="statusInfo" label="状态"></el-table-column>
        </el-table>

        <v-layout>
          <v-spacer />
        </v-layout>
      </v-flex>
    </v-layout>
  </v-form>
</template>

<script>
export default {
  name: "restitute-his-form",
  props: {
    oldOrder: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valid: false, //
      Order: {
        lrusername: "", //
        lsh: "", //
        status: 0, //
        driverCode: "",
        pathCode: ""
      },
      drivers: [],
      paths: [],
      search: "",
      selected: [],
      ghList: [],
      nameRules: [v => !!v || "不能为空"],
      totalGoods: 0, // 总条数
      goodsList: [], // 当前页品牌数据
      loading: true, // 是否在加载中
      pagination: {}, // 分页信息
      checkbox: false
    };
  },
  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    filter: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      },
      deep: true
    }
  },
  mounted() {
    console.info("form mounted");
    // 渲染后执行
    // 查询数据
  },
  methods: {
    selectable(row, index) {
      return !this.isEdit;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.selected = val;
    },
    getDataFromServer() {

      this.$http
        .get("/item/logistics/driverlist", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.drivers = resp.data;
          // 完成赋值后，把加载状态赋值为false
        });
      this.$http
        .get("/item/logistics/pathlist", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.paths = resp.data;
        });

      if (this.isEdit) {
        return;
      }

      this.$http
        .get("/item/xsth/ghmx", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.ghList = resp.data;
          // this.totalGoods = resp.data.total;
          this.Order.ghList = resp.data;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        });
    }
  },
  watch: {
    oldOrder: {
      // 监控oldOrder的变化
      handler(val) {
        if (val) {
          // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
          // this.getDataFromServer();
          this.Order = Object.deepCopy(val);
          this.getDataFromServer();
          this.ghList = val.ghList;
          this.selected = val.ghList;
        } else {
          // 为空，初始化brand
          this.Order = {
            lsh: "",
            id: "",
            status: 0,
            lrusername: ""
          };
          this.getDataFromServer();
          // this.thList = val.thList;
        }
      },
      deep: true
    }
  },
};
</script>

<style scoped>
</style>
